<template>
  <scroll-view
    @scrolltolower="handleToLower"
    class="recommend_view"
    scroll-y
    v-if="recommends.length>0"
  >
    <!--推荐 开始-->
    <view class="recommend_wrap">
      <navigator :url="`/pages/album/index?id=${item.target}`" class="recommend_item" v-for="item in recommends" :key="item.id">
        <image mode="widthFix" :src="item.thumb" />
      </navigator>
    </view>
    <!--推荐 结束-->

    <!--月份 开始-->
    <view class="months_wrap">
      <view class="months_title">
        <view class="months_title_info">
          <view class="months_info">
            <text>{{months.DD}} /</text>
            {{months.MM}} 月
          </view>
          <view class="months_text">{{months.title}}</view>
        </view>
        <view class="months_title_more">更多></view>
      </view>
      <view class="months_content">
        <view class="months_item" v-for="(item,index) in months.items" :key="item.id">
          <go-detail :index="index" :list="months.items">
            <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)" />
          </go-detail>
        </view>
      </view>
    </view>
    <!--月份 结束-->

    <!--热门 开始-->
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
        <view class="hot_item" v-for="(item,index) in hots" :key="item.id">
          <go-detail :index="index" :list="hots">
            <image mode="widthFix" :src="item.thumb" />
          </go-detail>
        </view>
      </view>
    </view>
    <!--热门 结束-->
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDetail";
export default {
  data() {
    return {
      //推荐列表
      recommends: [],
      //月份
      months: {},
      //热门
      hots: [],
      //请求参数
      params: {
        limit: 30, //获取几条数据
        order: "hot", //查询类型
        skip: 0 //要跳过几条
      },
      //是否还有下一页
      hasMore: true
    };
  },

  //在组件挂载时获取接口数据
  mounted() {
    //修改页面标题
    uni.setNavigationBarTitle({ title: "推荐" });
    this.getList();
  },

  methods: {
    //获取接口数据
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params
      }).then(result => {
        //判断还有没有下一页数据
        if (result.res.vertical.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多数据",
            icon: "none"
          });
          return;
        }

        //第一次发送请求 绑定数据
        if (this.recommends.length === 0) {
          //头部推荐模块
          this.recommends = result.res.homepage[1].items;
          //月份模块
          this.months = result.res.homepage[2];

          //将时间戳格式化
          this.months.MM = moment(this.months.stime).format("MM");
          this.months.DD = moment(this.months.stime).format("DD");
        }

        //获取热门数据列表 使用数组拼接的形式es6
        this.hots = [...this.hots, ...result.res.vertical];
      });
    },

    //滚动条触底事件(做分页效果)
    handleToLower() {
      if (this.hasMore) {
        //修改请求参数
        this.params.skip += this.params.limit;
        //发送请求 获取数据
        this.getList();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none"
        });
      }
    }
  },

  components:{
    goDetail
  }
};
</script>

<style lang="scss" scoped>
.recommend_view {
  //height:屏幕高度-头部标题高度
  height: calc(100vh - 36px);
}

.recommend_wrap {
  //flex布局
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}

.months_wrap {
  .months_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .months_title_info {
      color: $color;
      font-size: 30rpx;
      font-weight: 600;
      display: flex;
      .months_info {
        text {
          font-size: 36rpx;
        }
      }

      .months_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }

    .months_title_more {
      font-size: 24rpx;
      color: $color;
    }
  }

  .months_content {
    display: flex;
    flex-wrap: wrap;
    .months_item {
      width: 33.3%;
      border: 5rpx solid #fff;
    }
  }
}

.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: 20rpx solid $color;
      padding-left: 20rpx;
      font-size: 34rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hot_item {
      width: 33.3%;
      border: 5rpx solid #fff;
      image {
      }
    }
  }
}
</style>